<template>
    <div class="login-c">
      <div class="login" v-loading="loginLoading">
        <div class="t">夕宇管理后台V1.0</div>
        <el-form>
          <el-form-item label="用户名" :error="loginForm.userName.error">
            <el-input v-model="loginForm.userName.value" placeholder="请输入用户名" type="number" maxlengh="10" @focus="loginForm.userName.error = ''" />
          </el-form-item>
          <el-form-item label="密码" :error="loginForm.password.error">
            <el-input v-model="loginForm.password.value" placeholder="请输入密码" type="password" maxlength="20" @focus="loginForm.password.error = ''" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">立即登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
  import $ from 'jquery'
  export default {
    name: "login",
    data () {
      return {
        loginForm: {
          userName: {
            error: '',
            value: ''
          },
          password: {
            error: '',
            value: ''
          }
        },
        loginLoading: false
      }
    },
    methods: {
      login () {
        if (!this.loginForm.userName.value) {
          this.loginForm.userName.error = '请输入账号'
        }
        if (!this.loginForm.password.value) {
          this.loginForm.password.error = '请输入密码'
        }
        if (!!this.loginForm.userName.value && !!this.loginForm.password.value) {
          this.loginLoading = true
          $.ajax({
            url: this.bindAPI(`/account/login?username=${this.loginForm.userName.value}&password=${this.loginForm.password.value}`),
            complete: (res) => {
              const data = JSON.parse(res.responseText)
              if (data.code !== 200) {
                this.loginForm.userName.error = this.loginForm.password.error = data.message
              } else {
                const authorization = data.data.token
                $.ajax({
                  url: this.bindAPI('/admin/adminAuth'),
                  headers: {
                    authorization
                  },
                  complete: res => {
                    const data = JSON.parse(res.responseText)
                    if (data.code !== 200) {
                      this.$alert(data.message, '警告', {
                        type: 'error'
                      })
                    } else {
                      this.$message({
                        type: 'success',
                        message: '登录成功！'
                      })
                      sessionStorage.setItem('token', authorization)
                      this.$router.push('/management/articleList')
                    }
                  }
                })
              }
              this.loginLoading = false
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
.login {
  width: 380px;
  padding: 20px 20px 40px 20px;
  border: 1px solid #ddd;
  height: 320px;
  background: #fff;
  box-shadow: 0 0 10px #ddd;
}
.login .t {
  font-size: 22px;
  margin-bottom: 20px;
}
.login-c {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  background: #f5f5f5;
}
</style>